import darkTheme from '@/style/theme/dark.less'
import lightTheme from '@/style/theme/light.less'

// 切换css
export const changeTheme = (theme: string) => {
  const head = document.head
  document.getElementById('theme')?.remove()
  const styleDom = document.createElement('style')
  styleDom.id = 'theme'
  styleDom.innerHTML = theme
  head.appendChild(styleDom)
}

// 改变css变量
export const changeCss = (css: string, value: string) => {
  const body = document.body.style
  body.setProperty(css, value)
}

// 当主题变化时切换CSS以及主题CSS文件
export const handleThemeChange = (isDarkTheme: boolean) => {
  if (isDarkTheme) {
    changeTheme(darkTheme)
    changeCss('--page-bg-color', '#141414')
    changeCss('--head-bg-color', 'rgba(0, 0, 0, 0.5)')
    changeCss('--line-color', '#2e2e2e')
    changeCss('--content-bg-color', 'rgb(255 255 255 / 4%)')
    changeCss('--text-color', 'rgba(255, 255, 255, 0.85)')
  } else {
    changeTheme(lightTheme)
    changeCss('--page-bg-color', 'white')
    changeCss('--head-bg-color', 'rgba(255, 255, 255, 0.7)')
    changeCss('--line-color', '#e8e8e8')
    changeCss('--content-bg-color', '#f0f2f5')
    changeCss('--text-color', 'rgba(0, 0, 0, 0.85)')
  }
}
